<template>
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" size="small">
    <el-form-item label="社区名称" prop="communityName">
      <el-input v-model.trim="ruleForm.communityName" placeholder="请输入社区名称"></el-input>
    </el-form-item>

    <el-form-item label="社区经度" prop="communityLongitude">
      <el-input v-model.trim="ruleForm.communityLongitude" placeholder="请输入社区经度"></el-input>
    </el-form-item>

    <el-form-item label="社区维度" prop="communityLatitude">
      <el-input v-model.trim="ruleForm.communityLatitude" placeholder="请输入社区维度"></el-input>
    </el-form-item>

    <el-form-item label="社区介绍" prop="communityIntroduce">
      <el-input
        type="textarea"
        :rows="4"
        v-model.trim="ruleForm.communityIntroduce"
        placeholder="请输入社区介绍"
      ></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
/* Mixins
------------------------------- */
import { Form } from '@/mixins'

/* Api
------------------------------- */
import {
  checkCommunityInfoName,
  checkCommunityPropertyContactNumber
} from '@/api'

/* Model
------------------------------- */
import { communityInfoModel, primaryKey } from '../model'

export default {
  mixins: [Form('ruleForm', communityInfoModel)],
  data () {
    const asyncCheckCommunityInfoName = (rule, value, callback) => {
      return this.checkCommunityInfoName(
        {
          name: value,
          id: this.ruleForm[primaryKey]
        },
        {
          onOk ({ data }) {
            !data ? callback(new Error('当前社区名称已存在')) : callback()
          },
          onError ({ message }) {
            callback(new Error(message))
          }
        }
      )
    }

    return {
      ruleForm: Object.assign({}, communityInfoModel),
      rules: {
        communityName: [
          {
            required: true,
            message: this.$t('required', { field: '社区名称' })
          },
          { validator: asyncCheckCommunityInfoName, trigger: 'blur' }
        ],
        communityLongitude: [
          {
            required: true,
            message: this.$t('required', { field: '社区经度' })
          }
        ],
        communityLatitude: [
          {
            required: true,
            message: this.$t('required', { field: '社区维度' })
          }
        ],
        communityIntroduce: [
          {
            required: true,
            message: this.$t('required', { field: '社区简介' })
          }
        ]
      }
    }
  },
  methods: {
    // --------------------------------------  request --------------------------------------
    checkCommunityInfoName ({ name, id }, { onOk, onError }) {
      return this.Catch(checkCommunityInfoName, {
        onOk,
        onError
      })(null, name, id)
    },

    checkCommunityPropertyContactNumber ({ number, id }, { onOk, onError }) {
      return this.Catch(checkCommunityPropertyContactNumber, {
        onOk,
        onError
      })(null, number, id)
    }
    // -------------------------------------- !request --------------------------------------
  }
}
</script>
